<template>
    <div>
        <FollowUp v-if="list.length" :list="list" @editData="editData"></FollowUp>
        <empty v-else></empty>
        <!-- 添加跟进记录 -->
        <Dialog
            ref="addFollowUpRef"
            :title="`${addForm.id?'编辑':'添加'}跟进记录`"
            width="40%"
        >
            <div class="sale-body comm-list">
                <el-form ref="form" :model="addForm" label-width="100px">
                    <el-form-item label="跟进类别">
                        <el-select style="width: 130px"  v-model="addForm.cid" placeholder="选择跟进类别" size="mini">
                            <el-option
                                v-for="item in add_txt_cat_ls"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开放给客户">
                        <el-switch
                            v-model="addForm.is2c"
                            active-value="1"
                            inactive-value="2"
                            >
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="跟进记录">
                        <el-input
                            style="width: 400px;"
                            type="textarea"
                            :rows="4"
                            placeholder="请输入跟进记录"
                            v-model="addForm.txt">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="上传图片">
                        <div class="img-box">
                            <div class="img-box-item" v-if="!addForm.imgs || addForm.imgs.length < 9" >
                                <div class="img-box-div" @click="chooseImg()">
                                    <text class="icon-font search-icon">&#xe606;</text>
                                </div>
                            </div>
                            <div class="img-box-item" 
                                v-for="(item, index) in addForm.imgs" :key="index" >
                                <div class="img-box-div" @click="chooseImg(index)">
                                    <text class="icon-font search-icon">&#xe606;</text>
                                    <img v-if="item" :src="item" alt="">
                                </div>
                                <div
                                    v-if="item"
                                    class="img-del"
                                    @click="imgDelFun(index)"
                                >
                                    删除
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                    <div class="btnBox">
                        <el-button type="primary"  @click="setTxtSave">保存</el-button>
                    </div>
                </el-form>
            </div>
        </Dialog>
        <!-- 编辑添加跟进 -->
        <Dialog
            title="编辑添加跟进类别"
            ref="addCategoryRef"
            width="30%"
            class="addCateDiv"
            :modal="false"
        >
            <div class="addCategoryBox">
                <el-button class="addBtn" type="success" @click="addCatSave('')" size="mini">添加分类</el-button>
                <div class="addCategoryItem" v-for="(item, index) in add_txt_cat_ls" :key="index" >
                    <span>{{item.title}}</span>
                    <div>
                        <el-button type="primary" size="mini" @click="addCatSave(item.id)">编辑</el-button>
                        <el-button type="danger" @click="catDelClass(item)" size="mini">删除</el-button>
                    </div>
                </div>
            </div>
        </Dialog>
    </div>
</template>

<script>
import FollowUp from "@/components/customers/FollowUp.vue";
import config from "@/js/conf/Config.js";
import uploadPic from "@/js/upload/UploadPic.js";
import staticConst from "@/js/const/StaticConst.js";
import empty from "@/components/comm/empty.vue";
import Dialog from "@/components/commV2/Dialog/index.vue";

export default {
    props: ["add_txt_cat_ls","customerId","list","isDrawerStatus"],
    components: {FollowUp,empty,Dialog},
    data () {
        return {
            // addCategoryShow: false, // 添加编辑类别 控制显示
            // addFollowUpShow: false, // 添加跟进记录 控制显示
            addForm: {
                cid: "",
                imgs: [],
                txt: "",
                is2c: "2",
            }
        }
    },
    methods: {
        editData (row) {
            console.log(row)
            if(this.issDrawerStatusFun()) return;
            this.$refs.addFollowUpRef.open();
            this.addForm = {
                cid: row.cid,
                imgs: row.imgs,
                txt: row.txt,
                is2c: row.is2c,
                id: row.id,
            }
            // this.addFollowUpShow = true;
        },

        issDrawerStatusFun() {
            if (this.isDrawerStatus) {
                this.$message({
                    message: '暂不支持查看/操作',
                    type: 'warning'
                });
                return true;
            }else{
                return false;
            }
        },
        
        handleClose () {
            this.$refs.addFollowUpRef.close();
            this.addForm = {
                cid: "",
                imgs: [],
                txt: "",
            }
        },
        // 添加跟进记录 
        async setTxtSave () {
            this.addForm.customerid = this.customerId;
            let url = config.CUSTOM_TXT_SAVE;
            let copyImgs = JSON.parse(JSON.stringify(this.addForm.imgs))|| []
            copyImgs = copyImgs.filter( item=> {
                return item
            })
            this.addForm.imgs = copyImgs;
            let res = await this.$api({ url: url, data: this.addForm})
            if (res.status == 1) {
                this.$message({
                    message: `${this.addForm.id?'编辑':'添加'}成功` ,
                    type: 'success'
                });
                this.$emit("upDataFun",{isArr: true})
                this.handleClose()
            }
        },
        chooseImg(index){ // 图片上传
            console.log(index,'indexwwqwe')
            let that = this;
            uploadPic.idyun = this.idyun;
            // uploadPic.activeId = 1;
            uploadPic.type = staticConst.UPLOAD_INTER_ACTIVE;
            uploadPic.uploadSussecc = uploadSuccess;
            uploadPic.chooseImage1(callBack);
            function callBack(data)
            {
                that.url = data.url;  //显示图片
            }
            
            function uploadSuccess(data)
            {
                that.newUploadPicSuccess(data,index)
            }
        },
        /*****新上传图片成功*****/
        newUploadPicSuccess(result, batchid) {
            console.log(result,'resultresultresult')
            this.addForm.imgs.push(result.url)
            if (this.addForm.imgs.length < 9 && batchid == this.addForm.imgs.length -1) {
                this.addForm.imgs.push("")
            }
        },
        // 删除图片
        imgDelFun(index) { 
            this.addForm.imgs.splice(index, 1);
        },
        // ------------------------------------
        addCategoryShow () {
            this.$refs.addCategoryRef.open();
        },
        
        addFollowUpShow () {
            this.addForm = {
                cid: "",
                imgs: [],
                txt: "",
            }
            this.$refs.addFollowUpRef.open();
        },

        // 添加编辑跟进类别
        addCatSave (id) {
            this.itemId = id
            let title = this.itemId ? '编辑': '新增'
            this.$prompt('请输入跟进类别', title, {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                this.addTxtCatSaveAjax(value)
            }).catch(() => {});
        },
        async addTxtCatSaveAjax (val) {
            let url = config.CUSTOM_TXT_CAT_SAVE;
            let param = {
                title: val,
                id: this.itemId
            }
            let res = await this.$api({url:url, data:param,})
            if (res.status == 1) {
                // this.tabArr[this.listIndex].list = [];
                // this.getCustomTxtLs ();
                this.$emit("upDataFun",{isArr: true})
            }
            console.log(res)
        },
        // 删除跟进类别
        catDelClass (item) {
            this.$confirm('确定删除该跟进类别吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let url = config.CUSTOM_TXT_CAT_DEL
                let param = {
                    id: item.id
                }
                let res = await this.$api({url: url, data: param})
                if(res.status == 1) {
                    // this.tabArr[this.listIndex].list = [];
                    // this.getCustomTxtLs ();
                    this.$emit("upDataFun",{isArr: true})
                }
            }).catch(() => {});
        },
    }
}
</script>

<style lang="scss" scoped>
.addCateDiv {
    ::v-deep.el-dialog__body {
        padding: 10px 20px 30px;
    }
    .addBtn {
        margin-bottom: 20px;
    }
}

.btnBox {
    display: flex;
    justify-content: flex-end;
}

.img-box {
    display: flex;
    flex-wrap: wrap;
    ::v-deep.img-row {
        width: 100px;
        height: 150px;
        margin-right: 20px;
        .uploader-box {
            margin-top: 0;
        }
        .img-del {
            text-align: center;
            color: #f36b6e;
            cursor: pointer;
            line-height: 20px;
        }
    }
    .img-box-item {
        margin: 0  15px 20px 0;
        &:last-child {
            margin-right: 0;
        }
        .img-del {
            text-align: center;
            color: #f36b6e;
            cursor: pointer;
            line-height: 20px;
            margin-top: 10px;
        }
    }
    .img-box-div {
        width: 100px;
        height: 100px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        border: 1px solid #EEEEEE;
        cursor: pointer;
        > img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 8px;
        }
        > .search-icon {
            font-size: 20px;
            color: #999999;
        }
        
    }
}
.addCategoryBox {
    width: 100%;
    .addCategoryItem {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
}
</style>